<template>
<div class="leftMenu">
  <div v-if="activeNav.path != 'home'">
    <el-menu :default-active="activeTag.path" 
      class="el-menu-vertical-demo" 
      @select="handleSelect" 
      :collapse="leftMenuSwitch" 
      background-color="rgb(235, 241, 246)" 
      >
      <el-submenu :index="activeNav.path">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">{{activeNav.name}}</span>
        </template>
        <el-menu-item v-for="item in activeNav.content" :key="item.name" :index="item.path">{{item.name}}</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
  <div v-else>
    <el-menu default-active="home" 
      class="el-menu-vertical-demo"
      :collapse="leftMenuSwitch" 
      background-color="rgb(235, 241, 246)"
      >
      <el-menu-item key="home" index="home">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
    </el-menu>
  </div>
</div>

</template>

<script>
export default {
  props: {
    leftMenuSwitch: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    //vues里的状态不能直接绑定到data里的属性,得放在computed里
    activeNav() {
      return this.$store.state.modules.navigation.activeNav
    },
    activeTag() {
      return this.$store.state.modules.navigation.activeTag
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      let routerPush =  '/home/' + keyPath[0] +'/' + keyPath[1]
      for(let tag of this.activeNav.content) {
        if(tag.path == key) {
            //修改当前活跃标签
            this.$store.commit('updActiveTag',{name:tag.name,path:tag.path,fullPath:routerPush})
        }
      }
      // 页面跳转
      if(this.$route.path != routerPush) {
        this.$router.push(routerPush)
      }
      // 修改标签组状态
      this.$store.commit('clickTags',{name:this.activeTag.name,path: routerPush})
    }
  }
}
</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .menuSwitch{
    margin-left: 20px;
  }
</style>
